<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <!-- 内容为初始值；
  要求：初始值位数和 即将过渡的最大值位数相同 -->
    <p>
      Signatures gathered:
      <span id="signatures">000</span>
      <br />
      <button id="start-campaign">Start campaign</button>
    </p>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="./9/jquery.animateNumber.min.js"></script>
    <script type="text/javascript">
      var max_number = 200

      var padding_zeros = ''
      for (var i = 0, l = max_number.toString().length; i < l; i++) {
        padding_zeros += '0' // 这里设置占位符
      }

      var padded_now,
        numberStep = function (now, tween) {
          var target = $(tween.elem),
            rounded_now = Math.round(now)

          var rounded_now_string = rounded_now.toString()
          padded_now = padding_zeros + rounded_now_string
          padded_now = padded_now.substring(rounded_now_string.length)

          target.prop('number', rounded_now).text(padded_now)
        }

      var use_max_power = $('#checkbox')
      $('#start-campaign').click(function () {
        $('#signatures').animateNumber(
          {
            number: max_number,
            numberStep: numberStep,
          },
          5000
        )
      })
    </script>
  </body>
</html>
